<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>修改用户</title>
    <!-- 引入Bootstrap CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h1>修改用户信息</h1>
    <form id="editUserForm">
        <div class="form-group">
            <label for="userName">用户ID</label>
            <input type="text" id="userID" name="userID" class="form-control" th:value="${user.userID}" disabled>
        </div>
        <div class="form-group">
            <label for="userName">用户名</label>
            <input type="text" id="userName" name="userName" class="form-control" th:value="${user.userName}" disabled>
        </div>
        <div class="form-group">
            <label for="userEmail">邮箱</label>
            <input type="email" id="userEmail" name="userEmail" class="form-control" th:value="${user.userEmail}" required>
        </div>
        <div class="form-group">
            <label for="userPassword">密码</label>
            <input type="text" id="userPassword" name="userPassword" class="form-control" th:value="${user.userPassword}" required>
        </div>
        <button type="submit" class="btn btn-success">保存</button>
        <a href="/userManage" class="btn btn-secondary">取消</a>
    </form>
</div> <!-- 闭合了container div -->

    <!-- JavaScript部分用于AJAX提交 -->
    <script>
        document.getElementById('editUserForm').onsubmit = function(event) {
            event.preventDefault(); // 防止默认的表单提交行为

            var userID = document.getElementById('userID').value;
            var userName = document.getElementById('userName').value;
            var userEmail = document.getElementById('userEmail').value;
            var userPassword = document.getElementById('userPassword').value;

            var user = {
                userID: parseInt(userID), // 确保ID为整数
                userName:userName,
                userEmail: userEmail,
                userPassword: userPassword // 如果新密码为空，则传null或不传此字段
            };

            fetch(`/user`, {
                method: 'PUT', // 使用PUT方法来表示更新操作
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(user),
            })
            .then(response => response.json())
            .then(data => {
                alert("用户信息修改成功");
                window.location.href = "/userManage"; // 成功后重定向到用户管理页面
            })
            .catch((error) => console.error('Error:', error));
        };
    </script>

    <!-- Bootstrap JS and dependencies (可选) -->
<script src="/static/js/jquery-3.5.1.slim.min.js"></script>
<script src="/static//js/popper.min.js"></script>
<script src="/static//js/bootstrap.min.js"></script>
</body>
</html>